import * as React from 'react'
import {View, TouchableOpacity, Text,Image,StyleSheet,TextInput,SafeAreaView,Modal} from 'react-native'
import Back from '../../../../common/component/back'

const avatar = {uri: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-16898564e0a7dfb0eb1f2072dae62f3f_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613130485&t=9adfc5111d4292e9d98bad6d928eaa0f'}
const carame = require('../../../../common/img/carame2.png')

let descText = "谈爱恨，不能潦草，战车敲啊敲"

class MineInfo extends React.Component{


  constructor(props){
    super(props)
  }

  state = {male: true,descLen: descText.length, modalShow: false}

  render(){
    const {navigation} = this.props
    return(
      <SafeAreaView style={styles.container}>
        <Back navigation = {navigation}></Back>
        <View style={styles.content}>
          <View style={styles.top} >
            <Text style={styles.title}>编辑资料</Text>
            <View style={styles.topImage}>
              <Image style={{width: '100%',height: '100%'}} source={avatar}/>
              <View style={{width: 30, height:30, position: 'absolute', top: 15, left: 15,borderRadius: 15,backgroundColor: 'white',alignItems: 'center',justifyContent: 'center'}}>
                <View style={{width: 26, height: 26,backgroundColor: 'black',borderRadius: 13, alignItems: 'center',alignItems: 'center',justifyContent: 'center'}}>
                  <Image source={carame} style={{width: 16,height: 16 }}/>
                </View>
              </View>
              
            </View>
          </View>

          <View style={styles.infoContent}>
            <View style={styles.infoItem}>
              <Text style={styles.infoItemTitle}>昵称</Text>
              <TextInput style={styles.infoItemDesc}>缘分一道桥</TextInput>
            </View>
            <View style={[styles.infoItem, styles.infoItemSex]}>
              <Text style={styles.infoItemTitle}>性别</Text>
              <TouchableOpacity style={[styles.sexBtn, !this.state.male && {backgroundColor: 'white'}]} onPress = {()=>this.setState({male: true})}><Text style={[styles.sexText, !this.state.male && {color: 'black'}]}>男</Text></TouchableOpacity>
              <TouchableOpacity style={[styles.sexBtn, this.state.male && {backgroundColor: 'white'}]} onPress = {()=>this.setState({male: false})}><Text style={[styles.sexText, this.state.male && {color: 'black'}]}>女</Text></TouchableOpacity>
            </View>
            <View style={styles.infoItem}>
              <Text style={styles.infoItemTitle}>生日</Text>
              <Text style={styles.infoItemDesc} onPress={()=>{this.setState({modalShow: true})}}>点击设置</Text>
            </View>
            <View style={styles.infoItem}>
              <Text style={styles.infoItemTitle}>签名</Text>
                <TextInput maxLength={15}  style={styles.infoItemDesc,{width: 260}} onChangeText={(text)=>{this.setState({descLen: text.length})}}>谈爱恨，不能潦草，战鼓敲啊敲</TextInput>
              <Text style={{fontSize: 12}}>{this.state.descLen}</Text>
              <Text style={{fontSize: 12, color: 'rgb(153, 153, 153)'}}>/15</Text>
            </View>
          </View>
        </View>
        
      </SafeAreaView>
    )
  }

}


const  styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  content: {
    margin: 15,
  },
  top: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold'
  },
  topImage: {
    width: 60,
    height: 60,
    // backgroundColor: 'red'
  },
  infoContent: {
    marginTop: 40,
  },
  infoItem: {
    flexDirection: 'row',
    marginBottom: 30
  },
  infoItemTitle: {
    fontSize: 14,
    color: 'rgba(153, 153, 153, 1)',
    marginRight: 50
  },
  infoItemDesc: {
    fontSize: 14,
    fontWeight: 'bold',
    width: 260
  },
  sexBtn: {
    width: 50,
    height: 26,
    borderRadius: 13,
    borderColor: 'black',
    borderWidth: 1,
    backgroundColor: 'black',
    marginRight: 13,
    alignItems: 'center',
    justifyContent: 'center'
  },
  sexText: {
    color: 'white',
    fontSize: 14,
    // fontWeight: 'bold'
  },
  infoItemSex: {
    // justifyContent: 'center',
    alignItems: 'center'
  },

  modal: {
    flex: 1,
    backgroundColor: 'red'
  }
})


export default MineInfo